/**
 * useMemo
 *
 *    作用：获取一份缓存的数据
 *
 *    语法：
 *      const memoState = useMemo(get, deps)
 *      1. get - 一个函数，用于计算值的函数
 *        1. 该函数默认会触发一次，后续当 deps 中的依赖有变化时才会再次触发
 *        2. 该函数必须有返回值，返回的就是 useMemo 的结果
 *      2. deps - 依赖项数组
 *      3. memoState 是只读的。不允许修改
 */

import { Button, Space } from "antd";
import { useMemo, useState } from "react";

export default function App() {
  const [count, setCount] = useState(1);
  const [msg, setMsg] = useState("~");

  const countPlus = useMemo(() => {
    console.log("计算");
    return count + 1;
  }, [count]);

  const hello = useMemo(() => {
    return count + msg;
  }, [count, msg]);

  return (
    <div>
      <h1>useMemo</h1>

      <Space>
        <Button onClick={() => setCount((count) => count + 1)}>{count}</Button>

        <Button>{countPlus}</Button>
        <Button>{countPlus}</Button>
        <Button>{countPlus}</Button>
      </Space>

      <hr />

      <Space>
        <Button onClick={() => setMsg((msg) => msg + "~")}>{msg}</Button>
        <Button>{hello}</Button>
      </Space>
    </div>
  );
}
